<template>
  <div class="page-container ">
    <ex_header_spiler :title="$tt('label_base_info')" />
    <ex_super_desc v-bind="baseOption" :data="form" :attrs="$defaultDetailDescAttrs">
    </ex_super_desc>
    <ex_header_spiler :title="$tt('label_consignee_info')" />
    <ex_super_desc v-bind="consigneeOption" :data="form" :attrs="$defaultDetailDescAttrs" />
    <!-- <ex_header_spiler :title="$tt('label_modity_consignee_info')" v-if="form.detailAddress" />
    <ex_super_desc v-bind="consigneeOption" :data="form.detailAddress" :attrs="$defaultDetailDescAttrs"
      v-if="form.detailAddress" /> -->
    <ex_header_spiler :title="$tt('label_sku_specification')" />
    <ex_super_table v-bind="skuOption" :data="form.orderDetails" size="default" height="400">
    </ex_super_table>
    <ex_header_spiler :title="$tt('label_face_order_specification')">
      <template v-slot:left>
        <el-button v-if="selfTrackList.length > 0"
          @click="$refs.print_outbound_track.show(selfTrackList, { thirdParty: false })">{{
      $tt("label_print_any", { type: "label_self_draw_face_track", i18n: true }) }}</el-button>
        <el-button v-if="threeTrackList.length > 0"
          @click="$refs.print_outbound_track.show(threeTrackList, { thirdParty: true })">{{
      $tt("label_print_any", { type: "label_third_party_face_track", i18n: true }) }}</el-button>
      </template>
    </ex_header_spiler>
    <ex_super_table v-bind="trackOption" :data="form.packageList" size="default" height="400">
    </ex_super_table>

    <print_outbound_track ref="print_outbound_track" :tableModel="[
      { key: 'trackNumber', label: 'label_face_track_code', 'min-width': 120, 'show-overflow-tooltip': true, },
      {
        key: 'packageFlag', label: 'label_is_pack', 'width': 120, 'show-overflow-tooltip': true,
        formatter: (r, c, v) => this.$enumShow(v, 'YesOrNoEnum')
      },
    ]" />

  </div>
</template>

<script>
import print_outbound_track from '@/component/print/print_outbound_track'
// import detail_common_new from '@/component/dialog/detail_common_new'
import router_params from '@/mixin/router_params';

import popover_sn_detail from '@/component/wms/popover_sn_detail'
export default {
  components: { print_outbound_track, popover_sn_detail, },
  mixins: [router_params],
  data() {
    return {
      loading: false,
      form: {},

      baseOption: {
        model: [
          { key: 'outOrderNo', label: 'label_outbound_code' },
          { key: 'omsOrderNo', label: 'label_order_code' },
          { key: 'outType', label: 'label_outbound_type', formatter: (r, c, v) => this.$enumShow(v, "OutboundOrderTypeEnum") },
          { key: 'outStatus', label: 'label_outbound_status', formatter: (r, c, v) => this.$enumShow(v, "OutboundOrderStatusEunm") },

          { key: 'bizType', label: 'label_business_type', formatter: (r, c, v) => this.$enumShow(v, "BizTypeEnum") },
          { key: 'outboundProductType', label: 'label_sku_outbound_request', formatter: (r, c, v) => this.$enumShow(v, "OutboundProductTypeEnum") },

          // { key: 'channelName', label: 'label_pms_supply' },
          { key: 'warehouseCode', label: 'label_outbound_warehouse', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'customerName', label: 'label_customer_info', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'ecPlatformName', label: 'label_ec_platform', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'signReceipt', label: 'label_sign_server', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: "supplierName", label: "label_pms_supply", },
          { key: 'trackNumber', label: 'label_face_track_code', },
          { key: 'insuranceService', label: 'label_insurance_server', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'insuranceAmount', label: 'label_insurance_amount', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'packageCount', label: 'label_package_number', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'skuCount', label: 'label_sku_count', render: (h, scope) => this.$renderText(h, scope) },

          { key: 'estimateTotalWeight', label: 'label_expected_total_weight', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Weight(data[item.key])), },
          { key: 'estimateTotalVolume', label: 'label_expected_total_volume', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Volume(data[item.key])), },
          { key: 'weight', label: 'label_actual_total_weight', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Weight(data[item.key])), },
          { key: 'volume', label: 'label_actual_total_volume', render: (h, { data, item }) => this.$renderText(h, this.$addUnitQuick.Volume(data[item.key])), },

          { key: 'interceptFlag', label: 'label_is_doing_intercept', span: 1, formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'interceptStatus', label: 'label_intercept_status', span: 1, formatter: (r, c, v) => this.$enumShow(v, "OrderInterceptStatusEnum") },
          { key: 'interceptTime', label: 'label_intercept_order_time', span: 1, formatter: (r, c, v) => this.$dateFormat(v) },
          { key: 'interceptCause', label: 'label_intercept_reason', span: 1, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'twicePutawayFlag', label: 'label_is_second_put', span: 1, formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },

          { key: 'remark', label: 'label_remark', render: (h, scope) => this.$renderText(h, scope) },

          // { key: 'country', label: 'label_consignee_country', },
          // { key: 'province', label: 'label_consignee_province' },
          // { key: 'city', label: 'label_consignee_city' },
          // { key: 'county', label: 'label_consignee_county' },
          // { key: 'address', label: 'label_consignee_address' },
          // { key: 'reserveAddress', label: 'label_consignee_address_reserve' },
          // { key: 'consignee', label: 'label_consignee_person_name', },
          // { key: 'consigneePhone', label: 'label_consignee_person_phone', },

          { key: 'outDate', label: 'label_outbound_date', formatter: (r, c, v) => this.$dateFormat(v) },

          // { key: 'allowShortOut', label: 'allowShortOut', formatter: (r,c,v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'wavePlanFlag', label: 'label_is_create_waveplan', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'pickTaskFlag', label: 'label_is_create_picktask', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'ullageFlag', label: 'label_is_allow_ullage_outbound', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },
          { key: 'ullageOutboundFlag', label: 'label_is_been_ullage_outbound', formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum") },

          { key: 'logisticsName', label: 'label_logistics', render: (h, scope) => this.$renderText(h, scope) },
          { key: 'outboundMode', label: 'label_outbound_method', formatter: (r, c, v) => this.$enumShow(v, "OutboundOrderModeEnum") },

          // { key: 'customsServiceFlag', label: 'customsServiceFlag', formatter: (r,c,v) => this.$enumShow(v, "YesOrNoEnum") },
        ],
      },
      consigneeOption: {
        model: [

          { key: 'ecPlatformWarehouse', label: 'label_ec_platform_warehouse', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'ecPlatformWarehouseAddr', label: 'label_ec_platform_warehouse_address', if: () => this.EC_WAREHOUSE_DELIVERY, span: 3, render: (h, scope) => this.$renderText(h, scope) },
          {
            key: 'requireDeliveryTime', label: 'label_require_delivery_time', if: () => this.EC_WAREHOUSE_DELIVERY,
            formatter: (r, c, v) => this.$dateFormat(v)
          },
          { key: 'country', label: 'label_consignee_country', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'consignee', label: 'label_consignee_person_name', if: () => this.EC_WAREHOUSE_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },


          { key: 'transferLogisticsName', label: 'label_transship_logistics_name', if: () => this.LOGISTICS_TRANSFER, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'transferConsigneePhone', label: 'label_transship_receive_contact', if: () => this.LOGISTICS_TRANSFER, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'transferShippingAddress', label: 'label_transship_receive_address', if: () => this.LOGISTICS_TRANSFER, span: 2, render: (h, scope) => this.$renderText(h, scope) },

          { key: 'takeDeliveryPerson', label: 'label_take_good_user_name', if: () => this.TAKE_THEIR, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'takeDeliveryPersonPhone', label: 'label_take_good_contact', if: () => this.TAKE_THEIR, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'takeDeliveryTime', label: 'label_expected_take_good_date', if: () => this.TAKE_THEIR, formatter: (r, c, v) => this.$dateFormat(v) },


          { key: 'country', label: 'label_consignee_country', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'consignee', label: 'label_consignee_person_name', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'consigneePhone', label: 'label_consignee_person_phone', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'province', label: 'label_consignee_province', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'city', label: 'label_consignee_city', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'email', label: 'label_consignee_person_email', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'postcode', label: 'label_consignee_postcode', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'houseNumber', label: 'label_consignee_house_number', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'companyName', label: 'label_consignee_company', if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'address', label: 'label_consignee_address', span: 3, if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
          { key: 'reserveAddress', label: 'label_consignee_address_reserve', span: 4, if: () => this.HOME_DELIVERY, render: (h, scope) => this.$renderText(h, scope) },
        ],
      },
      skuOption: {
        model: [
          {
            key: 'returnOrderCode', label: 'label_return_order_code', 'width': 100, if: () => this.form.ownerlessFlag == "Y",
            // formatter: (r, c, v) => {
            //   const obj = r.requireDetails ? _.head(r.requireDetails) : null
            //   if (!obj) return null
            //   return obj.returnOrderCode
            // },
          },
          {
            key: 'storeCode', label: 'label_platform_store', 'width': 100, if: () => this.form.ownerlessFlag == "Y",
            // formatter: (r, c, v) => {
            //   const obj = r.requireDetails ? _.head(r.requireDetails) : null
            //   if (!obj) return null
            //   return obj.storeCode
            // },
          },
          {
            key: 'boxNo', label: 'label_box_code', 'min-width': 150, if: () => !this.SkuOutbound,
            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.id}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
          {
            key: "skuBarcode", label: "label_sku_code", 'width': 150,
            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              if (row.skuId < 0) return '——'
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.id}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
          {
            key: 'skuOnlyCode', label: 'label_sku_only_code', 'min-width': 150,
            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              if (row.skuId < 0) return '——'
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.id}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },
          },
          {
            key: 'skuNameCn', label: 'label_sku_name', 'width': 120, 'show-overflow-tooltip': true,
            formatter: (r, c, v) => (r.skuId < 0) ? '——' : this.$formatNameCode(v, r.skuNameEn)
          },
          { key: 'stockUsage', label: 'label_stock_usage', 'width': 120, sortable: true, formatter: (r, c, v) => this.$enumShow(v, "StockUsageEnum") },
          { key: 'skuCount', label: 'label_expected_outbound_count', 'width': 120, sortable: true, },
          {
            key: 'actualPickCount', label: 'label_actual_pick_count', 'width': 120, sortable: true,
            render: (h, scope) => {
              return h(popover_sn_detail, {
                props: {
                  value: scope.row.actualPickCount,
                  list: scope.row.actualDetails,
                },
              })
            },
          },
          {
            key: 'putawayDetails', label: 'label_put_info', 'width': 180,
            render: (h, scope) => {
              const list = scope.row.putawayDetails
              if (_.isEmpty(list)) {
                return this.$renderText(h, null)
              }
              return (<div>
                {list.map(it => (
                  <div>【{it.locationCode}】→(<span class="bold color_success">{it.qty}</span>)</div>
                ))}
              </div>)
            },
          },
        ],
      },
      trackOption: {
        model: [
          {
            key: 'trackNumber', label: 'label_face_track_code', 'min-width': 240,
            propertyFilter: true, sortable: true,
            render: (h, { row, column }) => {
              const code = row[column.property]
              if (!code) return this.$tt('data_temp_none')
              return (<text_extra_tooltip_operate
                value={code}
                data_type={column.property} data_id={row.id}
                extra_barcode_image={true} extra_text_align='center'
              />)
            },

          },
          {
            key: "packageFlag", label: "label_is_pack", 'width': 120, 'show-overflow-tooltip': true, sortable: true,
            formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum")
          },
          { key: "packingType", label: "label_pack_material_type", 'width': 120, 'show-overflow-tooltip': true, },
          { key: "packingName", label: "label_pack_material_name", 'width': 120, 'show-overflow-tooltip': true, },

          // { key: 'skuCount', label: 'label_outbound_count', 'width': 120, },
          // { key: 'weight', label: 'label_weight', 'width': 120, 'show-overflow-tooltip': true, },
          // { key: 'volume', label: 'label_volume', 'width': 120, 'show-overflow-tooltip': true, },
          // { key: 'length', label: 'label_length', 'width': 120, 'show-overflow-tooltip': true, },
          // { key: 'width', label: 'label_width', 'width': 120, 'show-overflow-tooltip': true, },
          // { key: 'height', label: 'label_height', 'width': 120, 'show-overflow-tooltip': true, },

          {
            label: 'label_check_pack_size', 'width': 220, render: (h, { row }) => {
              const item = row
              if ([item.weight, item.length, item.width, item.height].every(it => !it)) return this.$tt('data_temp_none')
              return (<div>

                <div>{this.$tt("label_weight") + " : "}{this.$renderText(h, this.$addUnit(this.$formatDigit(item.weight, 3), "kg"))}</div>
                <div>{this.$tt("label_length") + " : "}{this.$renderText(h, this.$addUnit(this.$formatDigit(item.length, 2), "cm"))}</div>
                <div>{this.$tt("label_width") + " : "}{this.$renderText(h, this.$addUnit(this.$formatDigit(item.width, 2), "cm"))}</div>
                <div>{this.$tt("label_height") + " : "}{this.$renderText(h, this.$addUnit(this.$formatDigit(item.height, 2), "cm"))}</div>
                <div>{this.$tt("label_volume") + " : "}{this.$renderText(h, this.$addUnit(this.$formatDigit(item.volume, 3), "m³"))}</div>

              </div>)
            }
          },
          {
            key: "checkoutFlag", label: "label_is_checkout", 'width': 120, 'show-overflow-tooltip': true, sortable: true,
            formatter: (r, c, v) => this.$enumShow(v, "YesOrNoEnum")
          },


        ],
      },

    }
  },
  computed: {
    HOME_DELIVERY() {
      return !this.form.outboundMode || this.form.outboundMode == "HOME_DELIVERY"
    },
    TAKE_THEIR() {
      return this.form.outboundMode == "TAKE_THEIR"
    },
    EC_WAREHOUSE_DELIVERY() {
      return this.form.outboundMode == "EC_WAREHOUSE_DELIVERY"
    },
    LOGISTICS_TRANSFER() {
      return this.form.outboundMode == "LOGISTICS_TRANSFER"
    },
    TOB() {
      return this.form.bizType == 'TOB'
    },
    SkuOutbound() {
      return this.form.outboundProductType == 'PRODUCT_OUTBOUND'
    },
    selfTrackList() {
      if (!this.form.packageList) return []
      return this.form.packageList.filter(it => !it.labelOssPath && it.checkoutFlag != "Y")
    },
    threeTrackList() {
      if (!this.form.packageList) return []
      return this.form.packageList.filter(it => it.labelOssPath && it.checkoutFlag != "Y")
    },
  },
  methods: {
    init_data_default(into_params) {
      if (into_params.id) {
        this.loading = true
        this.$ajax({
          url: "/wms-api/outbound/OutboundOverseasOrderRpc/detail.json",
          method: 'post',
          data: { id: into_params.id },
          success: (res) => {
            if (res.data && res.data.orderDetails) {
              res.data.orderDetails = _.flatMap(res.data.orderDetails, (v, i, list) => {
                if (v.requireDetails) {
                  const list = []
                  let { requireDetails, actualDetails, ...other } = v
                  if (!actualDetails) actualDetails = []
                  v.requireDetails.forEach(((storeUse, storeIndex) => {
                    storeUse.skuCount = storeUse.qty
                    let aclist = []
                    list.push(Object.assign({}, other, storeUse, { actualDetails: aclist }))
                  }))
                  while (actualDetails.length > 0) {
                    let hasAdd = false
                    for (let i = 0; i < list.length; i++) {
                      if (actualDetails.length == 0) {
                        break;
                      }
                      let r = list[i]
                      let l = _.findIndex(actualDetails, it => it.stockUsage == r.stockUsage && it.bizType == r.bizType);
                      if (l >= 0) {
                        r.actualDetails.push(...actualDetails.splice(l, 1))
                        hasAdd = true
                      }
                    }
                    if (!hasAdd && actualDetails.length != 0) {
                      _.head(list).actualDetails.push(...actualDetails)
                      actualDetails = []
                      break;
                    }
                  }
                  list.forEach(it =>
                    it.actualPickCount = _.reduce(it.actualDetails, (sum, it) => sum + it.qty, 0)
                  )
                  return list
                } else {
                  v.actualPickCount = _.reduce(v.actualDetails, (sum, it) => sum + it.qty, 0)
                  return [v]
                }
              }
              );
            }
            this.form = Object.assign({}, res.data)
            this.fixTabLabel()
          },
          complete: () => {
            this.loading = false
          }
        })
      }
      this.fixTabLabel()
    },
    fixTabLabel() {
      if (!!this.form.outOrderNo) {
        this.$emit("tagModifyLabel", {
          _key: 'label_name_code', i18n: { name: true }, name: "title_overseas_outbound_detail",
          code: this.form.outOrderNo || ''
        })
      } else {
        this.$emit("tagModifyLabel", "title_overseas_outbound_detail")
      }
    },
  }
}
</script>
